<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath %>">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>new jsp</title>
    <link rel="stylesheet" href="/resources/lib/layui-v2.6.3/css/layui.css"
          media="all">
    <script src="/resources/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>

</head>
<body style="background-color: #f2f2f2">
<div class="layui-row " style="margin-top: 10px">
    <div class="layui-panel" style="margin-right: 20px;margin-left: 20px">
        <div style="padding: 30px;">
            <form class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label class="layui-form-label">旧密码: <span style="color: red;font-size: 20px;">*</span></label>
                    <div class="layui-input-block">
                        <input type="password" class="layui-input" name="oldPwd" lay-verify="required|checkOldPwd"
                               placeholder="请输入旧密码">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">新密码: <span style="color: red;font-size: 20px;">*</span></label>
                    <div class="layui-input-block">
                        <input type="password" class="layui-input" id="newPwd" name="newPwd"
                               lay-verify="required|checkNewPwd">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">新密码: <span style="color: red;font-size: 20px;">*</span></label>
                    <div class="layui-input-block">
                        <input type="password" class="layui-input" id="newPwd2" name="newPwd2"
                               lay-verify="required|checkNewPwd">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-input-block layui-btn-normal" id="doSave" lay-submit
                            lay-filter="doSave">确认保存
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    layui.use(['form', 'jquery', 'layer'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;

        //表单提交
        form.on("submit(doSave)", function (obj) {
            let field = obj.field;
            layer.confirm("确认修改密码吗?",{title:"提示"}, function () {
                $.post("/user/updatePwd.do", field, function (res) {
                    layer.msg(res.msg)
                    if (res.code === 200) {
                        setTimeout(function () {
                            layer.confirm('密码修改成功,是否退出登录',{title:"提示"},function () {
                                window.parent.document.getElementById('login-out').click()
                            })
                        },1000)
                    }
                })
            })
            return false;
        })

        //表单验证
        form.verify({
            checkNewPwd: function (value, item) {
                let pwd = $("#newPwd").val();
                let pwd2 = $("#newPwd2").val();
                if (pwd2 != pwd) {
                    return "两次密码不一致"
                }
            },
            checkOldPwd: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '密码不能有特殊字符';
                }
                let flag = true;
                let message = "";
                $.ajax({
                    url: "/user/checkPwd.do",
                    type: "post",
                    data: {oldPwd: value},
                    async: false,
                    dataType: "JSON",
                    success: function (res) {
                        if (res.code != 200) {
                            flag = false;
                            message = res.msg
                        }
                    },
                });
                if (!flag) {
                    return message
                }
            }
        });
    })
</script>
</html>